<template>
  <div class="add-plan-terminal-dialog">

    <el-dialog v-model="dialogVisible" title="添加终端" width="50%" size="small" :before-close="handleClose">

      <el-form :inline="true" :model="screenData" label-position="right" size="small">

        <el-form-item label="可营销终端">
          <el-select v-model="screenData.terminalType" placeholder="请选择营销终端" :disabled="datas.terminalType != 'all'">
            <el-option v-for="item in appOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

        </el-form-item>

        <el-form-item label="终端名称">
          <el-input v-model="screenData.terminalName" placeholder="请输入终端名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" plain @click="getTerminal">查询</el-button>
        </el-form-item>

      </el-form>

      <el-table max-height="350" border size="small" :cell-style="cellStyle" cell-class-name="table_cell"
        :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="selectable" />
        <el-table-column header-align="center" align="center" label="终端名称" prop="terminalName" show-overflow-tooltip />
        <el-table-column header-align="center" align="center" label="所在地区" prop="area" show-overflow-tooltip />
        <el-table-column header-align="center" align="center" label="终端类型" prop="type">
          <template #default="scope">
            {{ getLabel('app_mode',scope.row.terminalType) }}
          </template>
        </el-table-column>

      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose" size="small">取消</el-button>
          <el-button type="primary" size="small" @click="dialogConfirm">添加</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {crmStore} from "../../../store";
import {InfoFilled} from "@element-plus/icons";
import {defineComponent, getCurrentInstance, inject, reactive, toRefs,} from "vue";

export default defineComponent({
  name: "Index",
  components: { InfoFilled },
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    const props1 = reactive({
      multiple: true,
      expandTrigger: "hover",
      label: "regionName",
      value: "regionCode",
    });
    const appOptions = crmStore.getters["dictionary/getDictionary"]["app_mode"];

    var data = reactive({
      screenData: {
        productId: 0,
        planName: "",
        terminalName: "",
        terminalType: "",
        region: "",
        areas: [],
      },
      tableData: [],
      dialogVisible: false,
      cascader: null,
      selects: [],
      datas: {},
    });

    const cellStyle = () => {
      return "height: 30px;lin-height:30px";
    };

    const dialogConfirm = () => {
      if (!data.selects.length) {
        currentInstance.proxy.customMessage({
          type: "error",
          message: "请选择终端",
        });
        return;
      }
      const a = JSON.parse(JSON.stringify(data.selects));
      emit("confirm", a);

      data.dialogVisible = false;
      setTimeout(() => {
        data.selects = [];
        data.tableData = [];
      }, 100);
    };

    const handleClose = () => {
      data.screenData = {
        productId: 0,
        planName: "",
        terminalName: "",
        terminalType: "",
        region: "",
        areas: [],
      };
      data.dialogVisible = false;
    };

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(
        val,
        data.cascader.getCheckedNodes()
      );
      data.screenData.region = serve;
    };

    const getAreaCode = () => {
      const a = {
        provinceCode: [],
        cityCode: [],
        areaCode: [],
      };
      for (let i = 0; i < data.screenData.areas.length; i++) {
        const area = data.screenData.areas[i];
        if (area[0]) {
          a.provinceCode.push(area[0]);
        }
        if (area[1]) {
          a.cityCode.push(area[1]);
        }
        if (area[2]) {
          a.areaCode.push(area[2]);
        }
      }

      return a;
    };

    const getTerminal = () => {
      const a = {
        productId: Number(data.screenData.productId),
        distributeId: Number(data.datas.distributeId),
        terminalType: data.screenData.terminalType,
        region: data.datas.distributeRegion,
        agentRegion: data.datas.region,
        terminalName: data.screenData.terminalName,
        agentProductId:data.datas.id,
      };
      a.areaSelectType = true;

      api.marketingMatching.REGIONAL_TERMINAL_LIST(a).then((res) => {
        if (!res.code && res.data) {
          data.tableData = res.data.list;
          data.tableData.forEach((item) => {
            const index = props.list.findIndex(
              (a) => a.terminalId == item.terminalId
            );
            if (index != -1) {
              item.disable = true;
            }
            item.area = item.provinceName;
            if (item.cityName) {
              item.area = item.area + "/" + item.cityName;
            }
            if (item.areaName) {
              item.area = item.area + "/" + item.areaName;
            }
          });
        }
      });
    };

    const openDialog = (val) => {
      data.datas = val;
      data.screenData.terminalType = val.terminalType;
      data.screenData.productId = val.productId;
      getTerminal();
      data.dialogVisible = true;
    };

    const handleSelectionChange = (val) => {
      data.selects = val;
    };

    const selectable = (row) => {
      return !row.disable;
    };

    return {
      ...toRefs(data),
      props1,
      appOptions,

      handleClose,
      dialogConfirm,
      areaChange,
      openDialog,
      getTerminal,
      handleSelectionChange,
      selectable,
      cellStyle,
    };
  },
});
</script>

<style lang="scss" scoped>
.table_cell {
  height: 30px;
  line-height: 30px;
}
</style>
